<template>
    <div>
        <div class="search-wrapped">
            <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
                <el-form-item label="文件名:">
                    <el-input v-model="searchFrom.fileName" placeholder="请输入文件名"></el-input>
                </el-form-item>
                <el-form-item>
                    <template>
                        <div class="button-wrapped">
                            <el-button type="primary" size="mini" @click="onSubmit(); clearFrom()"><i
                                    class="el-icon-search"></i>查询</el-button>
                            <el-upload action="api/upload" :on-change="handleChange" multiple
                                :headers="{ token: token }" :on-success="success" :show-file-list=false>
                                <el-button size="mini" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                    </template>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="fileList" style="width: 100%">
            <el-table-column prop="fileName" label="文件名" width="380">
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小(KB)" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="上传时间">
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-download" circle
                        @click="loadFile(scope.row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" circle
                        @click="deleteFile(scope.row)"></el-button>
                </template>
            </el-table-column>
            <template slot="empty">
                <el-empty description="没有数据"></el-empty>
            </template>
        </el-table>
        <div class="block">
            <el-pagination background @current-change="handleCurrentChange" :current-page.sync="searchFrom.currentPage"
                :page-size="searchFrom.pageSize" layout="total, prev, pager,jumper, next" :total="total">
            </el-pagination>
        </div>
       
    </div>
</template>

<script>
import { GetListServer, DeleteFileServer } from '@/api/file'

export default {
    mounted() {
        this.getList()
    },
    data() {
        return {
            fileList: [],
            loadUrl: '',
            token: localStorage.getItem('token'),
            searchFrom: {
                fileName: '',
                pageSize: 6,
                currentPage: 1
            },
            total: 0,
            url: '',
            flags: false,
        };
    },
    methods: {
        loadFile(row) {
            // 创建一个隐藏的 <a> 标签
            // console.log(res)
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = row.url;
            link.setAttribute('download', ''); // 设置下载属性

            // 将 <a> 标签添加到 DOM 中并点击触发下载
            document.body.appendChild(link);
            link.click();
            // 下载完成后移除 <a> 标签
            document.body.removeChild(link);
        },
        clearFrom() {
            this.searchFrom = {
                fileName: '',
                pageSize: 6,
                currentPage: 1
            }
        },
        handleChange() {
            this.getList(this.searchFrom)
        },
        handleCurrentChange(val) {
            this.searchFrom.currentPage = val
            this.getList(this.searchFrom)
        },
        onSubmit() {
            this.getList(this.searchFrom)
        },
        success(res) {
            if (res.code == 1) {
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: '上传成功'
                })
            }
        },
        async deleteFile(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await DeleteFileServer({ 'url': row.url })
                if (res.code == 1) {
                    this.getList(this.searchFrom)
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: "删除文件成功"
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })

        },
        async getList() {
            let res = await GetListServer(this.searchFrom)
            if (res.code == 1) {
                this.fileList = res.data.records
                this.total = res.data.total
            }
        }
    },

}
</script>

<style lang="less" scoped>
.search-wrapped {
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.button-wrapped {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 调整按钮间的间距 */
    justify-content: center;
}

.block {
    display: flex;
    flex-direction: row-reverse;
}

:deep(.el-table th) {
    text-align: center;
}

:deep(.cell) {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>